<template>
  <div class="todo-page">
    <h2 class="page-title">待办事项</h2>
    
    <div class="todo-content">
      <!-- 添加待办 -->
      <div class="todo-add">
        <input 
          type="text" 
          v-model="newTodo" 
          @keyup.enter="addTodo"
          placeholder="添加新的待办事项..."
          class="todo-input"
        >
        <button @click="addTodo" class="add-btn" :disabled="!newTodo.trim()">
          <i class="fas fa-plus"></i>
          <span>添加</span>
        </button>
      </div>

      <!-- 待办列表 -->
      <div class="todo-list">
        <div class="todo-filters">
          <button 
            v-for="filter in filters" 
            :key="filter.value"
            @click="currentFilter = filter.value"
            :class="{ active: currentFilter === filter.value }"
            class="filter-btn"
          >
            {{ filter.label }}
            <span class="count" v-if="filter.count">{{ filter.count }}</span>
          </button>
        </div>

        <transition-group name="list" tag="ul" class="todo-items">
          <li v-for="todo in filteredTodos" 
              :key="todo.id" 
              class="todo-item"
              :class="{ completed: todo.completed }">
            <div class="todo-item-content">
              <input 
                type="checkbox" 
                :checked="todo.completed"
                @change="toggleTodo(todo)"
                class="todo-checkbox"
              >
              <span class="todo-text">{{ todo.text }}</span>
              <span class="todo-date">{{ formatDate(todo.date) }}</span>
            </div>
            <div class="todo-actions">
              <button @click="editTodo(todo)" class="action-btn edit" title="编辑">
                <i class="fas fa-edit"></i>
              </button>
              <button @click="deleteTodo(todo)" class="action-btn delete" title="删除">
                <i class="fas fa-trash-alt"></i>
              </button>
            </div>
          </li>
        </transition-group>

        <!-- 空状态 -->
        <div v-if="filteredTodos.length === 0" class="empty-state">
          <i class="fas fa-clipboard-list"></i>
          <p>{{ emptyStateMessage }}</p>
        </div>
      </div>
    </div>

    <!-- 编辑对话框 -->
    <div v-if="editingTodo" class="edit-dialog">
      <div class="dialog-content">
        <h3>编辑待办事项</h3>
        <input 
          type="text" 
          v-model="editingTodo.text"
          class="edit-input"
          @keyup.enter="saveEdit"
          ref="editInput"
        >
        <div class="dialog-actions">
          <button @click="cancelEdit" class="cancel-btn">取消</button>
          <button @click="saveEdit" class="save-btn" :disabled="!editingTodo.text.trim()">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Todo',
  data() {
    return {
      todos: [],
      newTodo: '',
      currentFilter: 'all',
      editingTodo: null,
      filters: [
        { label: '全部', value: 'all' },
        { label: '待完成', value: 'active' },
        { label: '已完成', value: 'completed' }
      ]
    }
  },
  computed: {
    filteredTodos() {
      switch (this.currentFilter) {
        case 'active':
          return this.todos.filter(todo => !todo.completed)
        case 'completed':
          return this.todos.filter(todo => todo.completed)
        default:
          return this.todos
      }
    },
    emptyStateMessage() {
      switch (this.currentFilter) {
        case 'active':
          return '没有待完成的事项'
        case 'completed':
          return '没有已完成的事项'
        default:
          return '开始添加你的待办事项吧'
      }
    }
  },
  methods: {
    addTodo() {
      const text = this.newTodo.trim()
      if (!text) return

      this.todos.unshift({
        id: Date.now(),
        text,
        completed: false,
        date: new Date()
      })
      this.newTodo = ''
      this.saveTodos()
    },
    toggleTodo(todo) {
      todo.completed = !todo.completed
      this.saveTodos()
    },
    editTodo(todo) {
      this.editingTodo = { ...todo }
      this.$nextTick(() => {
        this.$refs.editInput?.focus()
      })
    },
    saveEdit() {
      if (!this.editingTodo?.text.trim()) return
      
      const index = this.todos.findIndex(t => t.id === this.editingTodo.id)
      if (index !== -1) {
        this.todos[index] = { ...this.editingTodo }
        this.saveTodos()
      }
      this.editingTodo = null
    },
    cancelEdit() {
      this.editingTodo = null
    },
    deleteTodo(todo) {
      const index = this.todos.findIndex(t => t.id === todo.id)
      if (index !== -1) {
        this.todos.splice(index, 1)
        this.saveTodos()
      }
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN', {
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos))
    },
    loadTodos() {
      const saved = localStorage.getItem('todos')
      if (saved) {
        try {
          this.todos = JSON.parse(saved)
        } catch (e) {
          console.error('Failed to load todos:', e)
          this.todos = []
        }
      }
    }
  },
  created() {
    this.loadTodos()
  }
}
</script>

<style scoped>
.todo-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  font-size: 2rem;
  margin-bottom: 30px;
  color: var(--dark);
  font-weight: 600;
  text-align: center;
}

.todo-content {
  background: var(--card-bg);
  border-radius: var(--border-radius-md);
  padding: 30px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.todo-add {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.todo-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--gray-light);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  transition: var(--transition);
  background: white;
}

.todo-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.add-btn:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.todo-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-light);
}

.filter-btn {
  padding: 8px 16px;
  border: none;
  background: var(--gray-light);
  color: var(--dark);
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-btn.active {
  background: var(--primary);
  color: white;
}

.filter-btn .count {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.8rem;
}

.todo-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: var(--border-radius-sm);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.todo-item:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-md);
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: var(--gray);
}

.todo-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.todo-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--gray);
  cursor: pointer;
  transition: var(--transition);
}

.todo-checkbox:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.todo-text {
  font-size: 1rem;
  color: var(--dark);
  flex: 1;
}

.todo-date {
  font-size: 0.85rem;
  color: var(--gray);
  margin-left: 12px;
}

.todo-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--gray);
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.action-btn:hover {
  color: var(--dark);
  background: var(--gray-light);
}

.action-btn.edit:hover {
  color: var(--primary);
}

.action-btn.delete:hover {
  color: #ef4444;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  font-size: 1.1rem;
}

.edit-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  padding: 24px;
  border-radius: var(--border-radius-md);
  width: 90%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
}

.dialog-content h3 {
  margin-bottom: 16px;
  color: var(--dark);
}

.edit-input {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--gray-light);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  margin-bottom: 20px;
}

.edit-input:focus {
  outline: none;
  border-color: var(--primary);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn,
.save-btn {
  padding: 8px 20px;
  border-radius: var(--border-radius-sm);
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
}

.cancel-btn {
  background: var(--gray-light);
  color: var(--dark);
  border: none;
}

.save-btn {
  background: var(--primary);
  color: white;
  border: none;
}

.save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 列表动画 */
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .todo-page {
    padding: 15px;
  }

  .todo-content {
    padding: 20px;
  }

  .todo-add {
    flex-direction: column;
  }

  .add-btn {
    width: 100%;
    justify-content: center;
  }

  .todo-filters {
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 16px;
  }

  .filter-btn {
    white-space: nowrap;
  }

  .todo-item {
    padding: 12px;
  }

  .todo-date {
    display: none;
  }
}

@media (max-width: 480px) {
  .todo-page {
    padding: 10px;
  }

  .todo-content {
    padding: 15px;
  }

  .page-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .todo-item-content {
    gap: 8px;
  }

  .todo-checkbox {
    width: 18px;
    height: 18px;
  }

  .todo-text {
    font-size: 0.95rem;
  }

  .action-btn {
    padding: 6px;
  }
}
</style> 